<script lang="ts">
import { useMessage } from "naive-ui";
import { useRoute, useRouter } from 'vue-router'
import { UserState } from '../../stores/type'
import useUserStore from "../../stores/modules/user"

export default defineComponent({
  setup() {
    const loadingRef = ref(false)

    const message = useMessage()
    const router = useRouter()
    const route = useRoute()
    const userStore = useUserStore()
    const userName = ref('')
    const userPassword = ref('')

//message.error('账号或密码错误')
    // 发送登录请求
    const onLogin = () => {
      loadingRef.value = true
      setTimeout(() => {

        userStore.saveUser({
          userId: 123456,
          token: 'string',
          roleId: 123,
          roles: null,
          userName: 'super-admin',
          nickName: 'super-admin',
          avatar: 'string'
        } as UserState).then(() => {
          router
              .replace({
                path: route.query.redirect ? (route.query.redirect as string) : '/'
              })
              .then(() => {
                loadingRef.value = false
              })
        }).catch((error) => {
          loadingRef.value = false
          message.error(error.message)
        })

        // 登录成功
        message.success('登录成功')

        // 登录失败

      },1000)
    }

    return {
      loadingRef,
      userName,
      onLogin
    }
  }

})

</script>

<template>

  <section class="hotair-form">

    <div class="container">

      <div>
        <div class="main-hotair">

          <div class="content-wthree">
            <h2>账号登录</h2>
            <p>请输入账号和密码</p>
            <form action="#" method="post">

              <n-input-group>
                <n-input-group-label>账号</n-input-group-label>
                <n-input v-model:value="userName" placeholder="请输入账号" type="text" clearable />
              </n-input-group>

              <n-input-group>
                <n-input-group-label>密码</n-input-group-label>
                <n-input placeholder="请输入密码" type="password" show-password-on="click" clearable />
              </n-input-group>
              <n-input-group>
                <n-input-group-label>验证码</n-input-group-label>
                <n-input placeholder="请输入验证码" type="text" clearable />

              </n-input-group>
              <n-button type="info" :style="{width:'100%'}" @click="onLogin()" :loading="loadingRef">
                登录
              </n-button>
            </form>

            <p class="account">还没有注册账号？ <a href="#signup">注册</a></p>
          </div>
          <div class="l_form align-self"></div>
        </div>
      </div>

    </div>

    <div class="copyright text-center">
<!--      <p class="copy-footer-29">© 2020 Hotair Log In Form. All rights reserved | Design by </p>-->
    </div>
  </section>

</template>

<style lang="scss">

/*-- form styling --*/
.hotair-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  zoom: 1;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background: #fff url(../../assets/login/loginBackground.jpg) no-repeat center 0;

  .main-hotair {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  form {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  h2 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 5px;
    font-weight: 900;
    color: #272346;
    text-align: center;
  }
}

.container {
  max-width: 890px;
  margin: 0 auto;
}

.l_form {
  padding: 0px;
  flex-basis: 50%;
  -webkit-flex-basis: 50%;
  background: url(../../assets/login/left-bg.jpg) no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  padding:20px 20px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.content-wthree {
  flex-basis: 60%;
  -webkit-flex-basis: 60%;
  box-sizing: border-box;
  padding: 3em 3em;
  background: #fff;
  box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;

  form > div {
    margin-bottom: 20px !important;
  }
}

p.account, p.account a {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 0px;
  font-size: 16px;
  color: #333;
}

p.account a{
  color: #f52605;
  opacity:.95;
}
p.account a:hover {
  text-decoration: underline;
}
/* copyright start */
.copyright {
  p {
    text-align: center;
    font-size: 17px;
    line-height: 26px;
    color: #c5c2c2;
    opacity: 1;
  }
}

p.copy-footer-29 a {
  color: #666;
}

p.copy-footer-29 a:hover {
  color:#0568C1;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
}
/* copyright end */

@media (max-width:736px) {
  .hotair-form .main-hotair {
    flex-direction: column;
  }

  .l_form {
    order: 2;
    padding: 100px;
    border-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .content-wthree {
    order: 1;
    border-radius: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

@media (max-width:568px) {

  .hotair-form .main-hotair {
    margin: 30px 0;
  }

  .content-wthree {
    padding: 2.5em;
  }
}

@media (max-width: 415px) {
  .hotair-form {
    padding: 40px 30px;
  }

}

@media (max-width:384px) {
  .hotair-form {
    padding: 30px 15px;
  }

  .content-wthree {
    padding: 2em;
  }
  .hotair-form h2 {
    font-size: 22px;
    line-height: 32px;
  }

  .copyright p {
    font-size: 16px;
  }
  .hotair-form h1 {
    font-size: 32px;
  }
}
</style>

<route>
{
  meta: {
    hidden: true,
    noShowTabbar: true,
  }
}
</route>